<div class="layuimini-main">

    <div class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label required">学生</label>
            <div class="layui-input-inline">
                <select name="buildingId" lay-filter="buildingId" id="buildingId" lay-verify="required">
                </select>
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline">
                <select name="storeyId" lay-filter="storeyId" id="storeyId" lay-verify="required">
                </select>
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline">
                <select name="dormitoryId" lay-filter="dormitoryId" id="dormitoryId" lay-verify="required">
                </select>
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline">
                <select name="sno" lay-filter="sno" id="sno" lay-verify="required">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">缺勤时间</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" id="time" name="time" placeholder="yyyy-MM-dd" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注信息</label>
            <div class="layui-input-block">
                <textarea name="remark" class="layui-textarea" placeholder="请输入备注信息"></textarea>
            </div>
        </div>
        <input type="hidden" name = "buildingName" id="buildingName" />
        <input type="hidden" name = "dormitoryNo" id="dormitoryNo" />
        <input type="hidden" name = "studentName" id="studentName" />
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认新增</button>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['form','axios','layer','jquery','laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery,
            laydate = layui.laydate,
            axios = layui.axios;

        form.render();

        //日期
        laydate.render({
            elem: '#time'
        });

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;

        // 获得所有楼宇
        axios.get('building/getAll',{}).then(function (response) {
            $('#buildingId').append('<option value="">请选择楼宇</option>');
            response.data.list.forEach(item=>{
                let option = `<option value="${item.id}" key="${item.name}">${item.name}</option>`
                $('#buildingId').append(option);
            })
            form.render();
        });
        //获得所有楼层
        form.on('select(buildingId)', function(data){
            let buildingName = $("#buildingId").find("option:selected").attr("key")
            $("#buildingName").attr("value",buildingName)
            axios.post('storey/getList',{buildingId:data.value}).then(function (response) {
                $('#storeyId').empty();
                $('#storeyId').append('<option value="">请选择楼层</option>');
                response.data.storeys.forEach(item=>{
                    let option = `<option value="${item.id}">${item.storeyNo}层</option>`
                    $('#storeyId').append(option);
                })
                form.render();
            });
        });
        //获得所有宿舍
        form.on('select(storeyId)', function(data){
            let storeyId=data.value
            axios({
                method:'post',
                url:"dormitory/getList",
                data:{"storeyId":storeyId}
            })
            .then(function (response) {
                $('#dormitoryId').empty();
                $('#dormitoryId').append('<option value="">请选择宿舍</option>');
                response.data.dormitorys.forEach(item=>{
                    let option = `<option value="${item.id}" key="${item.no}">${item.no}</option>`
                    $('#dormitoryId').append(option);
                })
                form.render();
            });
        });
        //获得所有学生
        form.on('select(dormitoryId)', function(data){
            let dormitoryNo = $("#dormitoryId").find("option:selected").attr("key")
            let dormitoryId = data.value
            $("#dormitoryNo").attr("value",dormitoryNo)
            axios({
                method:"post",
                url:"dormitoryStudent/getAll",
                data:{"dormitoryId":dormitoryId}
            })
            .then(function (response) {
                $('#sno').empty();
                $('#sno').append('<option value="">请选择学生</option>');
                response.data.list.forEach(item=>{
                    let option = `<option value="${item.sno}" key="${item.student_name}">${item.student_name}</option>`
                    $('#sno').append(option);
                })
                form.render();
            });
        });
        //监听学生赋值
        form.on('select(sno)', function(data) {
            let studentName = $("#sno").find("option:selected").attr("key")
            $("#studentName").attr("value",studentName)
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            axios.post('absence/add',data.field).then(function(response){
                layer.msg(response.message,{
                    icon:6,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                },function () {
                    layer.close(parentIndex);
                    layui.table.reload('currentTableId');
                })
            }).catch(function (error) {
                layer.msg("请求错误",{
                  icon:5,
                  time:2000,
                  anim:6
                });
            });
            return false;
        });
    });
</script>